<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="1">
        <tr>
            <td>用户id</td>
            <td>用户名</td>
            <td>性别</td>
            <td>年龄</td>
            <td>手机号码</td>
            <td>操作</td>
        </tr>
        <!-- <tr>
            <td>1</td>
            <td>james</td>
            <td>男</td>
            <td>29</td>
            <td>17724254342</td>
            <td><button>删除</button></td>
        </tr> -->
    </table>
    <form action="">
        用户名：<input type="text" name="uname" id="uname"><br>
        性别：<input type="text" name="sex" id="sex"><br>
        年龄：<input type="text" name="age" id="age"><br>
        手机：<input type="text" name="tel" id="tel"><br>
        <button id="submit">提交</button>
    </form>
</body>
<script src="https://www.jq22.com/jquery/jquery-3.3.1.js"></script>
<script>
    var list = [
        {"id":1,"name":"james","sex":"男","age":29,"tel":17724254342},
        {"id":2,"name":"james001","sex":"男","age":29,"tel":17724254342},
        {"id":3,"name":"james002","sex":"男","age":29,"tel":17724254342},
    ];
    $.each(list, function (i, v) { 
        $('table').append('<tr><td>'+ v.id + '</td><td>' + v.name + '</td><td>' + v.sex + '</td><td>' + v.age + '</td><td>' + v.tel + '</td><td><button class="del">删除</button></td></tr>'); 
    });

    $('#submit').click(function(){
      $uname = $('#uname').val(); 
      $sex = $('#sex').val(); 
      $age = $('#age').val(); 
      $tel = $('#tel').val(); 
      console.log($uname);
      console.log($sex);
      console.log($age);
      console.log($tel);

    if($uname == ''){
        alert('用户名不能为空！');
        return flase;
    }


      data = {};

    //   获取最后一条数据
      var end = list.slice(-1);
      console.log(end);
      console.log(end[0].id)

      data.id = end[0].id+1;
      data.name = $uname;
      data.age = $age;
      data.sex = $sex;
      data.tel = $tel;
    //   console.log(data)
      list.push(data)
    //   console.log(list)

    // 先清空table下面的所有数据
    $('table').empty();
    // 显示list的所有数据
    $.each(list, function (i, v) { 
        $('table').append('<tr><td>'+ v.id + '</td><td>' + v.name + '</td><td>' + v.sex + '</td><td>' + v.age + '</td><td>' + v.tel + '</td><td><button>删除</button></td></tr>'); 
    });



      return false;
    })


    // $('.del').on('click',function(){
    //     $(this).parents('tr').remove();
    // })

    $(document).on('click','.del',function(){
        $(this).parents('tr').remove();
    })



</script>
</html>